<template>
    <main-layout>
        <div class="types-box">
            <div class="content">
                <div class="left">
                    <div :class="['text',type.active?'active':'' ]"
                    v-for="type in typeList" :key="type.name"
                    @click="typeChange(type)"
                    @change="gettype(type)"
                    >{{type.name}}</div>
                </div>

                <!-- 右边商品 -->
                <!-- 注册滚动事件 -->
                <div class="right" @scroll="scrollEvt">
                    <div class="shop" v-for="(it,index) in productList" :key="index">
                        <img :src="it.img">
                        <div class="text"> 
                            <i 
                             @click = addTocollect(it)
                             :class="[ it.active ? 'active' : '']" ></i>
                            <!-- <img src="../../imageskes.png" alt="" class="active"> -->
                            <span>{{it.title}}</span>
                        </div>
                    </div>

                    <!-- <div class="loading"> -->
                        
                        <div class="loading" v-if="loading">加载中...</div>
                        <div class="loading" v-else-if="hasMore">上滑加载更多</div>
                        <div class="loading" v-else>没有更多数据</div>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
import MockType from '../../mockdata/typearr'
import MockService from '../../mockdata/typearr'

// import MockType from '../../mockdata/typearr2'
    export default {
        data() {
            return {
                //是否点赞
                // active:true,
                // ispraised:true,
                typeList:[],
                page:5,
                // 产品列表数据对象
                productList:[],
                // 表示有更多的数据
                hasMore: true,
                // 数据接口请求中
                loading: true,

                name:this.$route.query.name,
            }
        },
        created() {
            MockType.getTypesApi().then(res=>{
                // let res=await MockType.getTypes()
                // console.log('res',res);
                if (res.code===200) {
                    let first=res.data.row.map(it => {
                        return {name:it,value:it,active:false}
                    })
                    first.unshift({name: '全部', value: '', active: true})

                    this.typeList=first

                    // 链式写法
                    return MockType.getProductApi()
                }
            }).then(res=>{
                if(res.code===200){
                    this.productList=res.data.row.map(it => {
                        return it
                    })
                }
                console.log(res);

                // 所有设置loading变量应该保证页面一定完成了渲染
                setTimeout(() => {
                    this.loading=false;
                },1000);
                    console.log("loading",this.loading);

            })
            this.getList()
            this.gettype()
        },

        methods: {
            async gettype(){
                // console.log('type',type);
                let res=await MockType.getTypesApi()
                if (res.code===200) {
                    let first=res.data.row.map(it =>{
                        return {name:it,value:it,active:false}
                        // it.name=this.name
                        // return it                        
                    })
                    first.unshift({name: '全部', value: '', active: true})
                    this.typeList=first
                    // it.active=it.name===this.name
                    this.typeList=this.typeList.map(its => {
                        its.active=its.name===this.name

                        return its
                    })
                        console.log(this.name);
                    console.log('this.typeList',this.typeList);
                }

            },
            
            typeChange(type){
                console.log('type',type);
                this.typeList=this.typeList.map(it => {
                    it.active=it.name===type.name
                    if (type.name==='全部') {
                        this.getList()
                        this.productList = []

                    }
                    if (type.name==='热门分类') {
                        this.getshop()
                        this.productList = []

                    }
                    if (type.name==='人气菜谱') {
                         this.productList = []
                        this.getpublic()
                       
                    }
                    if (type.name==='中国菜系') {
                        this.productList = []

                        this.getchina()
                    }
                    if (type.name==='家常菜谱') {
                        this.gethome()
                        this.productList = []
                        // return
                    }
                    if (type.name==='中国菜系') {
                        this.getchina()
                    }
                    if (type.name==='各地小吃') {
                        this.getplace()
                    }
                    if (type.name==='食疗养生') {
                        this.gethealth()
                    }
                    if (type.name==='水产海鲜') {
                        this.getseafood()
                    // this.productList = []

                    }

                    if (type.name==='外国食谱') {
                        this.getabroad()
                        this.productList = []

                    }
                    if (type.name==='肉内大全') {
                        this.getmeat()
                    }
                    this.productList = []

                    if (type.name==='烘焙甜点') {
                        this.getsweet()
                    }

                // debugger;
                    return it
                })

                // 改变了类型，从第一页开始获取数据
                this.page = 1

                // 开启节流标识
                this.loading = true

                // 从第一页获取数据，清空数据
                this.productList = []

                
                
                // 调用接口获取数据
                // this.getList()
                // this.getchina()
                // this.getAll()
            },
            scrollEvt(evt){
                // console.log('evt',evt);
                // scrollHeight：商品的高   offsetHeight：浏览器的高     scrollTop：滚动的高
                let isBot = evt.target.scrollHeight < (evt.target.offsetHeight + evt.target.scrollTop + 20)
                if (isBot && this.hasMore && !this.loading) {
                    // console.log('.............');
                    // 先设置加载状态
                    this.loading = true
                    // 设置page为将要获取的页面数字
                    this.page += 1
                    // 调用获取产品的接口
                    this.getList()
                    console.log("loading",this.loading);
                }

            },
            async getList(){
                let obj = this.typeList.find(it => it.active)
                let res=await MockType.getProductApi(this.page,obj.value)
                if(res.code===200){
                    let _list=res.data.row.map(it => {
                        return it
                    })

                    // 每次都是一个数据链接，如果切换了类型，能不能进行连接
                    this.productList = this.productList.concat(_list)

                    // 设置是否有更多的数据，还没有获取
                    console.log(this.page);
                    this.hasMore = this.page < Math.ceil(res.data.total / 5)
                }

                setTimeout(() => {
                    this.loading = false
                },1000);
            },


            // 热门分类
            async getshop(){
                  let home= await MockType.getProductApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its','its');
                        return its
                    })
                }
            },
            // 人气菜谱
            async getpublic(){
                  let home= await MockType.getpublicApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 家常菜谱
            async gethome(){
                  let home= await MockType.gethomeApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            //    中国菜系
            async getchina(){
                  let home= await MockType.getchinaApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 各地小吃
            async getplace(){
                  let home= await MockType.getplaceApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 食疗养生
            async gethealth(){
                  let home= await MockType.gethealthApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 水产海鲜
            async getseafood(){
                  let home= await MockType.getseafoodApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
              // 外国食谱
            async getabroad(){
                  let home= await MockType.getabroadApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 肉内大全
            async getmeat(){
                  let home= await MockType.getmeatApi()
                if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            // 烘焙甜点
            async getsweet(){
                  let home= await MockType.getsweetListApi()
                  if(home.code===200){
                    this.productList=home.data.row.map(its => {
                        // console.log('its',its);
                        return its
                    })
                }
            },
            async addTocollect(item){
                let result = await MockService.getProductApi()
                if (result.code === 200) {
                    // if (!!ispraised) {
                    //     item.active = true
                    // }
                    console.log(result.data.row);
                    this.productList=result.data.row.map(its => {
                        // console.log(its.title);
                        if (item.title===its.title) {
                            its.active=true
                            console.log('...');
                            let colList={
                                img:item.img,
                                title:item.title,
                                active:item.active
                            }

                            let colsStr=  localStorage.getItem('newCollections')
                            let itemArr = JSON.parse(colsStr) || []
                            let oldProduct = itemArr.find( item => item.title == colList.title )

                            if(oldProduct){
                                oldProduct.title = colList.title
                            }else{
                                itemArr.push(colList)
                            }
                            localStorage.setItem('newCollections',JSON.stringify(itemArr))
                        }
                        this.$toast.success('收藏成功')
                        return its
                    })
                }
                
            },

            

        },
    }
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.types-box{
    display: block;
    height: 100%;
    .content{
        display: flex;
        height: 100%;
        .left{
            flex: 0 0 100px;
            // float: left;
            overflow-x: hidden;
            // border: 1px solid #000;
            background-color: rgb(233, 232, 231);
            .text{
                line-height: 40px;
                font-size: 18px;
                color: rgb(99, 100, 100);
                
                padding-left: 10px;
                cursor: pointer;
                &.active {
                    background-color: #fff;
                    color: #e40114;
                    // &::after {
                    //     content: '';
                    // }
                }
            }
        }
        .right{
            flex: 1;
            overflow-x: hidden;
            // background-color: antiquewhite;
            .shop{
                padding: 0px 8px;
                margin-bottom: 12px;
                border-bottom: solid 1px #eaeaea;
                &:last-child{
                    border-bottom: none;
                    
                }
                img{
                    display: block;
                    width: 90%;
                    height: 200px;
                }
                .text{
                    display: flex;
                    font-size: 20px;
                    padding: 5px 0px;
                    // white-space: nowrap;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // padding-right: 10px;
                    // width: 100%;
                    i{
                        width: 20px;
                        height: 20px;
                        display: block;
                        margin: 5px 10px 0px 0px;
                        &::before {
                            content: '';
                            float: left;
                            width: 25px;
                            height: 21px;
                            background: url(../../images/likes.png) center center / 20px 20px no-repeat;
                        }
                        &.active::before {
                            background-image: url(../../images/likes-act.png);
                        }
                    }
                }
            }
        }
        .clear();
    }

}
</style>